<template>
<div>
    <div v-if="showBtoNav">
    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">
            <router-link  tag="span" to='/main' active-class="navBot">首页</router-link> 
        </van-tabbar-item>
        <van-tabbar-item icon="search">
            <router-link tag="span" to='/theater' active-class="navBot">剧院</router-link>  
        </van-tabbar-item>
        <van-tabbar-item icon="friends-o">
              <router-link tag="span" to='/wallets' active-class="navBot">票夹</router-link>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o" to='/center'>我的</van-tabbar-item>
    </van-tabbar>
    </div>
</div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
import { mapState } from "vuex";
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
    data () {
        return {
            active:0
        }
    },
    computed:{
        ...mapState('main',['showBtoNav']),
          ...mapState('main',['bottomList'])
    },
    mounted () {
    }
}
</script>

<style lang='scss' scoped>
div{
    z-index: 10;
}
.botNav{
    position: fixed;
    bottom: 0;
    height: 1.2rem;
    left: 0;
    width: 100%;
}
.navBot{
    color: red;
}
</style>
